<template>
    <div class="bg-white px-3" style="margin: -20px; margin-top:-1rem; margin-bottom: 0!important;">
        <!-- 标签页的内容 -->
        <!-- 高级搜索-->
        <button-search :show-search="false">
            <!-- 会匹配和使用到slot name=left的插槽 -->
            <template #left>
                <el-button type="success" size="mini" @click="openModel(false)">添加规格</el-button>
                <el-button type="danger" size="mini" @click="deleteALL">批量删除</el-button>
            </template>
        </button-search>

        <!-- 商品列表 -->
        <el-table :data="tableData" style="margin-top: 20px; background-color: antiquewhite;"
            @selection-change="handleSelectionChange">
            <!-- 添加顶部间距 -->
            <el-table-column type="selection" width="45" style="position: flex; align-items: center;" />
            <el-table-column label="规格名称" prop="name" align="center">
            </el-table-column>
            <el-table-column prop="default" label="规格值" align="center" />
            <el-table-column prop="order" label="排序" align="center">
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
                <template slot-scope="scope">
                    <el-button size="mini" plain @click="changeStatus(scope.row)"
                        :type="scope.row.status ? 'success' : 'danger'">{{ scope.row.status ? '启用' : '禁用' }}</el-button>
                </template>
            </el-table-column>

            <el-table-column prop="ischeck" label="操作" align="center" width="150">
                <template slot-scope="scope">
                    <!-- slot-scope="scope"创建了一个名为scope的新作用域，
                             它包含了子组件传递给插槽的所有数据。然后我们可以使用v-for指令来遍历scope.items。 -->
                    <el-button-group>
                        <!-- plain镂空 -->
                        <el-button type="primary" icon="el-icon-arrow" size="mini" plain
                            @click="openModel(scope)">修改</el-button>
                        <!-- scope.row传递当前对象 -->
                        <el-button type="danger" size="mini" plain @click="delItem(scope.row)">删除</el-button>
                    </el-button-group>
                </template>
            </el-table-column>
        </el-table>
        <!-- 底部 -->
        <div style="height: 60px;">
            <el-footer class="border-top d-flex align-items-center px-0 position-fixed bg-white"
                style="bottom:0;left: 200px;right: 0; z-index: 100;">
                <!-- flex:1占剩余的所有空间 -->
                <div style="flex: 1;">
                    <el-pagination :current-change="page.current" :page-sizes="page.sizes" :page-size="page.size"
                        layout="total, sizes, prev, pager, next, jumper" :total="page.total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </el-footer>

            <!-- 新增、修改规格的模态框 -->
            <el-dialog :title='editIndex > -1 ? "修改规格" : "添加规格"' :visible.sync="createModel" top="5vh">
                <!-- 表单内容 -->
                <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                    <el-form-item label="规格名称" prop="name">
                        <el-input v-model="form.name" size="mini" placeholder="规格名称"></el-input>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input-number v-model="form.order" size="mini"></el-input-number>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-radio-group v-model="form.status" size="mini">
                            <el-radio :label="1" border>启用</el-radio>
                            <el-radio :label="0" border>禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-radio-group v-model="form.type" size="mini">
                            <el-radio :label="0" border>文字</el-radio>
                            <el-radio :label="1" border>颜色</el-radio>
                            <el-radio :label="2" border>图片</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="规格值" prop="default">
                        <el-input type="textarea" :row="3" placeholder="一行一个规格项，多个规格需要换行输入"
                            v-model="form.default"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="submit">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>
<script>
import buttonSearch from '@/components/common/button-search.vue';
// 引入混入
import common from '@/common/mixins/common';

export default {
    name: 'GoodListMange',
    inject: ['layout'],
    // 注册混入
    mixins: [common],
    components: { buttonSearch },
    data() {
        return {
            preUrl: 'skus',
            form: {
                name: '',
                order: 50,
                status: 1,
                type: 0,
                default: '',
            },
            tableData: [], // 用来存储表格数据
            // tableData: [{
            //     id: 0,
            //     name: '颜色1',
            //     value: '棕色，蓝色',
            //     order: 50,
            //     status: 1,
            //     type: 0,
            // }, {
            //     id: 1,
            //     name: '颜色2',
            //     value: '棕色，蓝色',
            //     order: 50,
            //     status: 1,
            //     type: 0,
            // }, {
            //     id: 2,
            //     name: '颜色3',
            //     value: '棕色，蓝色',
            //     order: 50,
            //     status: 1,
            //     type: 0,
            // }, {
            //     id: 3,
            //     name: '颜色4',
            //     value: '棕色，蓝色',
            //     order: 50,
            //     status: 1,
            //     type: 0,
            // },],

            // 公用的，写入混入中
            // multipleSelection: [],
            // currentPage: 1,
            // 定义后端的分页
            // page: {
            //     current: 1,
            //     sizes: [10, 20, 30, 100],
            //     size: 10,
            //     total: 0,
            // },

            createModel: false,
            editIndex: -1,
            // 表单验证
            rules: {
                // 需要与prop="value"绑定的值一致
                name: [
                    { required: true, message: '规格名称不能为空', trigger: 'blur' },
                ],
                default: [
                    { required: true, message: '规格值不能为空', trigger: 'blur' },
                ],
            },
        };
    },
    // 将sku/list下的created钩子函数提取到这里，避免每次重复调用
    // created() {
    //     this.getList();
    // },
    // 写入混入了
    // computed: {
    //     // 选中记录id组成的数组
    //     ids() {
    //         // multipleSelection本身就是一个数组，使用map方法将其中的内容再重新组织一下，里面包含item.id
    //         return this.multipleSelection.map(item => {
    //             return item.id;
    //         });
    //     },
    // },
    methods: {
        getListResult(data) {
            this.tableData = data.list;
        },
        getListUrl() {
            return `/admin/${this.preUrl}/${this.page.current}?limit=${this.page.size}`;
        },
        // 这是一个可以复用的函数，现在将其写在混入common.js中
        // getList() {
        //     this.layout.showLoading();
        //     let url = `/admin/skus/${this.page.current}?limit=${this.page.size}`;
        //     this.$axios.get(url, { token: true }
        //     ).then((res) => {
        //         let data = res.data.data;
        //         // console.log(data);
        //         this.tableData = data.list,


        //         // 分页的数据
        //         this.page.total = data.totalCount;



        //         this.layout.hideLoading();
        //     }).catch(() => {
        //         this.$message({
        //             type: 'error',
        //             message: '获取数据失败，请稍后重试！'
        //         });
        //         this.layout.hideLoading();
        //     })
        // },

        // // 批量删除将要写入混入中去
        // deleteALL() {
        //     // return console.log('批量删除', this.ids);

        //     if (this.ids.length === 0) {
        //         return this.$message({
        //             type: 'warning',
        //             message: '请至少选择一项进行删除!'
        //         });
        //     }

        //     this.$confirm('是否要删除这些项目?', '提示', {
        //         confirmButtonText: '删除',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(() => {
        //         // this.multipleSelection.forEach(item => {
        //         //     let index = this.tableData.findIndex(v => v.id == item.id)
        //         //     if (index !== -1) {
        //         //         this.tableData.splice(index, 1)
        //         //     }
        //         // })
        //         // this.multipleSelection = []
        //         // this.$message({
        //         //     type: 'success',
        //         //     message: '删除成功!'
        //         // });
        //         this.layout.showLoading(); // 隐藏加载动画 

        //         this.$axios.post('/admin/skus/delete_all', {
        //             ids: this.ids
        //         }, { token: true }).then(() => {
        //             this.multipleSelection = []; // 清空选中项
        //             this.$message({
        //                 type: 'success',
        //                 message: '删除成功!'
        //             });
        //             this.getList(); // 重新获取列表数据
        //             this.layout.hideLoading(); // 隐藏加载动画 
        //         }).catch(() => {
        //             this.layout.hideLoading(); // 隐藏加载动画 
        //         });
        //     })
        // },
        //  添加规格事件
        openModel(e = false) {
            // 如果e为false，说明是添加操作，执行添加操作
            if (!e) {
                // 初始化表单
                this.form = {
                    name: '',
                    order: 50,
                    status: 1,
                    type: 0,
                    default: '',
                }
                // 增加操作
                this.editIndex = -1
            } else {
                // 修改操作
                this.form = {
                    name: e.row.name,
                    order: e.row.order,
                    status: e.row.status,
                    type: e.row.type,
                    default: e.row.default.replace(/,/g, /\n/g),
                }
                // 修改时设置
                this.editIndex = e.$index
            }
            this.createModel = true
        },
        // 提交表单
        submit() {
            this.$refs.form.validate(res => {
                if (res) {
                    // var msg = '添加'
                    this.form.default = this.form.default.replace(/\n/g, ',')
                    let id = 0
                    // 执行修改操作
                    if (this.editIndex !== -1) {
                        id = this.tableData[this.editIndex].id
                        // this.tableData.unshift(this.form)
                        // 将要写入混入common.js中
                        // this.layout.showLoading();
                        // this.$axios.post('/admin/skus', this.form,
                        //     { token: true }).then(() => {
                        //         // console.log(res);
                        //         this.$message({
                        //             message: msg + '成功',
                        //             type: 'success',
                        //         });
                        //         this.getList(); // 重新获取列表数据
                        //         this.layout.hideLoading();
                        //     }).catch(() => {
                        //         this.layout.hideLoading();
                        //     })

                    // } 
                    }
                    // else {
                        // msg = '修改'
                        // let item = this.tableData[this.editIndex]
                        // item.name = this.form.name
                        // item.order = this.form.order
                        // item.status = this.form.status
                        // item.type = this.form.type
                        // // item.value = this.form.value.replace(/,/g,/\n/g)
                        // item.default = this.form.default.replace(/,/g, /\n/g)

                        // this.tableData[this.editIndex]=this.form 

                        // 写入到混入mixin了
                        // this.layout.showLoading();
                        // this.$axios.post('/admin/skus/' + item.id, this.form,
                        //     { token: true }).then(() => {
                        //         // console.log(res);
                        //         this.$message({
                        //             message: msg + '成功',
                        //             type: 'success',
                        //         });
                        //         this.getList(); // 重新获取列表数据
                        //         this.layout.hideLoading();
                        //     }).catch(() => {
                        //         this.layout.hideLoading();
                        //     })
                    // }
                    // 添加
                    this.addOrEdit(this.form, id)
                    this.createModel = false
                }
            })
        },

        // 用来加载数据，监听点的是哪一个tab
        handleClick() {
            // console.log(this.activeName);
        },

        // // 选中，被引用到comon.js中
        // handleSelectionChange(val) {
        //     this.multipleSelection = val;
        // },

        // // 删除当前商品，写入混入了
        // delItem(item) {
        //     this.$confirm('是否要删除该规格?', '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(() => {
        //         // this.tableData.splice(scope, 1)
        //         // this.$message({
        //         //     type: 'success',
        //         //     message: '删除成功!'
        //         // });
        //         this.layout.showLoading(); // 显示加载动画
        //         this.$axios.post('/admin/skus/' + item.id + '/delete', {}, {
        //             token: true
        //         }).then(() => {
        //             this.$message({
        //                 type: 'success',
        //                 message: '删除成功!'
        //             })
        //             this.getList(); // 重新获取列表数据
        //             this.layout.hideLoading(); // 隐藏加载动画
        //         }).catch(() => {
        //             // console.log('删除失败:', err);

        //             this.layout.hideLoading(); // 隐藏加载动画
        //         })
        //     })
        // },

        // // 修改状态，要写入混入了
        // changeStatus(item) {
        //     // 请求服务端修改状态代码：
        //     let status = item.status === 1 ? 0 : 1; // 0为禁用，1为启用,判断最开始的状态，并取反
        //     let msg = status === 1 ? '启用' : '禁用'; //如果状态为1代表启用，否则代表禁用
        //     // console.log(item.id);

        //     this.layout.showLoading(); // 显示加载动画
        //     this.$axios.post(`/admin/skus/${item.id}/update_status`, {
        //         status: status
        //     }, { token: true }).then(() => {
        //         item.status = status; // 更新前端状态
        //         this.$message({
        //             message: msg + '成功',
        //             type: 'success',
        //         });
        //         this.layout.hideLoading(); // 隐藏加载动画
        //     }).catch(() => {
        //         this.layout.hideLoading(); // 隐藏加载动画
        //     });

        //     // // 修改前端
        //     // item.status = !item.status
        //     // this.$message({
        //     //     message: item.status ? '启用成功' : '禁用成功',
        //     //     type: 'success',
        //     //     duration: 2000
        //     // })
        // },
        onSubmit() {
            console.log('submit!');
        },

        // // 分页相关，将会写到common.js中
        // handleSizeChange(val) {
        //     this.page.size = val; //记得要重新赋值
        //     this.getList();
        // },
        // handleCurrentChange(val) {
        //     this.page.current = val;
        //     this.getList();
        // },

    },
};
</script>
<style scoped>
.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}
</style>